

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="min" />
         <title> </title>
         <g:javascript library="jquery"/>
<style>
.selectarea , .selectedarea{
border:1px solid #4CA5D8;
height: 300px;
}
ul{
list-style: none;
padding: 0;
padding-bottom: 5px;
}
ul li{
    line-height: 20px;
    padding-left: 20px;
    border-bottom:1px solid #EFEFEF;
}
li:hover {
    background: #F8E8C0;
}
</style>
<script language="JavaScript">
<!--
    $(function(){
        $(".selectarea ul li").click(function(){
            //alert($(this).text());
            var value = $(this).text();
            var pass = true;
            $.each($(".selectedarea ul li"),function(i , n){
                if (value == $(n).text())
                {
                    pass = false;
                }
            })

            if (pass)  {
            $(".selectedarea ul").prepend("<li value='"+$(this).attr("value")+"'>"+ $(this).text());
            $("#total").text($(".selectedarea ul li").size());
            }
            
        });
        $(".selectedarea ul li").live("click",function(){
            //alert($(this).text());
            $(this).remove();
            $("#total").text($(".selectedarea ul li").size());
        });
    });
//-->
</script>
    </head>
    <body>
        <div class="body">
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
    
            
                <table>
                    <tbody>
                    <tr class="prop">
                            <td valign="top" width="50%" >
                            <h1>教师(${teacherInstanceList?.size()})</h1>
                            <div class="selectarea">
                            <ul>
                            <g:each in="${teacherInstanceList}" var="teacher">
                            <li value="${teacher.id}">${teacher}
                            </g:each>
                            </ul>
                            </div>
                            </td>
                            
                            <td valign="top" width="50%" >
                            <h1>共享人(<span id="total">0</span>)</h1>
                            <div class="selectedarea">
                             <ul>
                            
                            </ul>
                            </div>
                            </td>
                            
                        </tr> 
                    </tbody>
                </table>
            
         
        </div>
    </body>
</html>
